<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta content="width=device-width,user-scalable=no,initial-scale=1" name="viewport">
    <title>Eggplant</title>
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/fontsize.css">
    <link rel="stylesheet" href="css/bootstrap.min.css">
    <script src="./js/jQuery.min.js"></script>
    <script src="./js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="css/swiper.min.css">
    <script src="js/swiper-bundle.min.js"></script>
    <link  rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css"/>
    <link rel="shortcut icon" href="./bitbug_favicon.ico" />
  </head>
<body>
    <div class="header">
      <div class="showTime"></div>
        <ul class="nav">
            <li class="nav-item">
              <a class="nav-link active" href="./index.html">home</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./egg.html">We</a>
            </li>
            <li class="nav-item">
              <a class="nav-link" href="./like.html">Like</a>
            </li>
     
          </ul>
    </div>
    <h1>About We</h1>
    <!--照片墙-->
     <div class="container">
        <div class="card" style="width: 18rem;">
            <img src="./images/yx01.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">大概这世上所有美好又遥远的事物,都像你。</p>
            </div>
          </div>
          <div class="card" style="width: 18rem;">
            <img src="./images/yx02.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">不会说动听的情话,只想把你留在身边。</p>
            </div>
          </div>
          <div class="card" style="width: 18rem;">
            <img src="./images/yx03.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">记得在这杂乱的生活里,每天带点笑意。</p>
            </div>
          </div>
          <div class="card" style="width: 18rem;">
            <img src="./images/yx04.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">我不贪心,只有一个小小的愿望:生命中永远有你。</p>
            </div>
          </div>
          <div class="card" style="width: 18rem;">
            <img src="./images/yx05.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">对我而言，这世间所有的一切和理想，都是你。</p>
            </div>
          </div>
          <div class="card" style="width: 18rem;">
            <img src="./images/yx06.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">相信我，我保护你。</p>
            </div>
          </div>
          <div class="card" style="width: 18rem;">
            <img src="./images/yx07.jpg" class="card-img-top" alt="...">
            <div class="card-body">
              <p class="card-text">希望你一直在.</p>
            </div>
          </div>
     </div>

    <style>
.showTime{
    position: absolute;
    right:0;
    top: 0;
    font-size: 7px;
    color: pink;
}
      body{
       background-image: url("./images/bg4.png");
      background-size: contain;
      background-color: black;
       background-repeat: no-repeat;
      }
          .header{
    height: 2.5rem;
    background-color: plum;
   }
   .nav-item a{
    color: white !important;
   }
 
   .nav-item a:hover{
    color:plum !important;
   }

   .container{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
   }

  .card{
    margin-bottom: 10px;
    width: 44% !important;
    opacity: 0.7;     
}

  h1{
     margin-left: 25px;
  }
  
  p{
    font-size: 10px;
    color: pink;
  }

    </style>
    <script>
      var t = null;
    t = setTimeout(time, 1000);//開始运行
    function time() {
        clearTimeout(t);//清除定时器
        dt = new Date();
        var y = dt.getFullYear();
        var mt = dt.getMonth() + 1;
        var day = dt.getDate();
        var h = dt.getHours();//获取时
        var m = dt.getMinutes();//获取分
        var s = dt.getSeconds();//获取秒
        document.querySelector(".showTime").innerHTML =  y + "年" + mt + "月" + day + "日" + h + ":" + m + ":" + s;
        t = setTimeout(time, 1000); //设定定时器，循环运行     
    }
    </script>
</body>
</html>